<template>
  <div class="left-chart-1">
    <template v-if="option.xAxis.data.length">
      <CustomChart class="lc2-chart" :option="option" />
    </template>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { queryTimePeriodYield } from "@/api/dashboard/injectionWorkshop";
const lineLabelColor = "#ffffffeb";
export default {
  name: "LeftChart2",
  components: { CustomChart },
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    workshopItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
    produceDate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      monthUnitConsum: 0,
      option: {
        grid: {
          bottom: 20,
          right: 10,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          data: [],
          textStyle: {
            color: lineLabelColor,
          },
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            interval: 0,
            color: lineLabelColor,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#ffffff"],
                opacity: 0.2,
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.workshopItem?.value || !this.groupItem) {
        return;
      }

      let data = [];
      try {
        const res = await queryTimePeriodYield({
          workshopId: this.workshopItem.value,
          produceDate: this.produceDate,
          groupId: this.groupItem.groupId,
        });
        data = res.data;
      } catch (error) {
        data = [];
      }
      this.formatter(data);
    },
    formatter(data) {
      let legendData = [];
      let xAxisData = [];
      let series = [];

      for (let i = 0; i < data.length; i++) {
        const line = data[i];
        legendData.push({ name: line.lineName });

        let seriesData = [];
        for (let j = 0; j < line.lineInfos.length; j++) {
          const item = line.lineInfos[j];
          if (i == 0) {
            xAxisData.push(item.timePeriod);
          }
          seriesData.push(item.actualOutput);
        }

        series.push({
          name: line.lineName,
          data: seriesData,
          type: "line",
          label: {
            show: false,
            fontSize: 11,
            position: "top",
            color: lineLabelColor,
          },
        });
      }

      this.option.legend.data = legendData;
      this.option.xAxis.data = xAxisData;
      this.option.series = series;
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 42px;

  .lc2-chart {
    flex: 1;
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
